@import './../../ver.less';

.BottomAction {
  position: fixed;
  left: 0;
  right:0;
  top:0;
  bottom:0;
  background: rgba(0,0,0,.65);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.actionContent {
  width: 100%;
}
.showAction {
  animation: maskShow 320ms ease-in-out forwards;
}
.hideAction {
  animation: maskHide 320ms ease-in-out forwards;
}
.showActionContent {
  animation: show 320ms ease-in-out forwards;
}
.hideActionContent {
  animation: hide 320ms ease-in-out forwards;
}

.showCenterContent {
  animation: showCenter 320ms ease-in-out;
}

.hideCenterContent {
  animation: hideCenter 320ms ease-in-out;
}
@keyframes showCenter {
  0%{
    transform: scale(0.5);
    opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity:1;
  }
}
@keyframes hideCenter {
  100%{
      opacity: 0;
  }
  0%{
      opacity: 0;
  }
}
@keyframes show {
  0%{
      transform: translate3d(0,100%,0);
      opacity:0;
  }
  100%{
      transform: translate3d(0,0,0);
      opacity:1;
  }
}
@keyframes maskShow {
  0%{
      opacity:0;
  }
  100%{
      opacity:1;
  }
}
@keyframes maskHide {
  100%{
      opacity:0;
  }
  0%{
      opacity:1;
  }
}
@keyframes hide {
  100%{
      transform: translate3d(0,100%,0);
      opacity:0;
  }
  0%{
      transform: translate3d(0,0,0);
      opacity:1;
  }
}